<template>
    <div>
        <div class="goodsindex">
            <!-- 搜索条件 -->
            <el-form ref="form" :model="queryInfo" >
                <el-row :gutter="20" class="goodsindex-queryInfo">
                    <!-- 商品名称搜索 -->
                    <el-col :xs="8" :sm="6" :md="6" :lg="4" :xl="4">
                        <el-select  class="goodsindex-queryInfo-li" v-model="queryInfo.label_id" filterable size="small" clearable placeholder="请选择标签">
                            <el-option
                                    v-for="item in label_name"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                            </el-option>
                        </el-select>
                    </el-col>
                    <el-col :xs="6" :sm="4" :md="3" :lg="2" :xl="2">
                        <el-button type="primary" class="goodsindex-queryInfo-li" size="small"  @click="search()">搜索</el-button>
                    </el-col>
                    <el-col :xs="6" :sm="4" :md="3" :lg="2" :xl="2">
                        <el-button type="success" class="goodsindex-queryInfo-li" size="small" @click="addForm()">添加</el-button>
                    </el-col>
                </el-row>
            </el-form>

            <!-- 检索结果 -->
            <el-row :gutter="20" class="goodsindex-list">
                <el-col :span="24">
                    <el-table
                            :data="tableData"
                            border
                            size='small'
                            style="width: 100%">
                        <el-table-column
                                type="index"
                                label="序号"
                                width="80">
                        </el-table-column>
                        <el-table-column
                                prop="label_id"
                                label="标签id"
                                width="80">
                        </el-table-column>
                        <el-table-column
                                prop="is_delete_text"
                                label="状态"
                                width="80">
                        </el-table-column>
                        <el-table-column
                                prop="label_name"
                                label="标签名称"
                                width="120">
                        </el-table-column>
                        <el-table-column
                                prop="label_description"
                                label="功能描述"
                                width="80">
                        </el-table-column>
                        <el-table-column
                                fixed="right"
                                label="操作"
                        >
                            <template  v-slot:default="scope">
                                <el-button type="text" size="small" @click="editForm(scope.$index,scope.row)">编辑</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-col>
            </el-row>
            <!-- 分页 -->
            <el-row :gutter="20" class="goodsindex-list">
                <el-col :span="24" class="goodsindex-page-box">
                    <el-pagination
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                            :current-page="queryInfo.page"
                            :page-sizes="[10, 20, 50, 100]"
                            :page-size="queryInfo.pageSize"
                            layout="total, sizes, prev, pager, next, jumper"
                            :total="queryInfo.total">
                    </el-pagination>
                </el-col>
            </el-row>
        </div>

        <LabelsSaveView :visible-child.sync="visible" :childFrom="LabelForm" :label-id="LabelId"></LabelsSaveView>
    </div>

</template>

<script>
    import LabelsSaveView from "@/views/labels/LabelsSaveView";
    import { labelsAll,getBaseLabels } from "@/api/api.js";

    export default {
        data(){
            return {
                visible:false,
                label_name:[],
                queryInfo:{
                    label_id:'',
                    page: 1 ,
                    pageSize: 10,
                    total:10
                },
                tableData: [],
                // 这是给子组件传递的参数
                LabelForm:{
                    label_id : -1,
                    label_name:'',
                    label_description:'',
                    is_delete:0
                },
                LabelId:-1
            }
        },
        components:{
            LabelsSaveView
        },
        methods:{
            handleSizeChange(pageSize){
                console.log('1',pageSize);
                this.labels([],this.queryInfo.page,pageSize);
            },
            handleCurrentChange(page){
                console.log('2',page);
                this.labels([],page,this.queryInfo.pageSize);
            },
            addForm(){
                this.visible = true;
            },
            editForm(index,value){
              console.log("value",value);
                this.visible = true;
                this.LabelForm = value;
                this.LabelId   = value.label_id;
            },
            getBaseLabels(){
                getBaseLabels().then((res) =>{
                    if (res.code === 200){
                        let options = [
                            {
                                label: '',
                                value: ''
                            }
                        ];
                        this.$.each(res.data,(index,values)=>{
                            options.push({
                                label: values.label_id + '--' + values.label_name,
                                value:values.label_id
                            })
                        })
                        this.label_name = options;
                        console.log("this.Label",this.label_name);
                    }
                }).catch(error =>{
                    this.$message({
                        type:'error',
                        message:error.message || 'Error'
                    });
                })
            },
            labels(data,page,pageSize){
                labelsAll(data,page,pageSize).then((res) =>{
                    if (res.code === 200){
                        // 这个分页的三条数据是为了防止分页器添加或者修改数据之后产生的bug,尤其是选择了多个分页条数之后
                        this.queryInfo.total = res.data.total;  //总和
                        this.queryInfo.page  = res.data.current_page; // current_page	当前页码
                        this.queryInfo.pageSize  = res.data.per_page;// per_page	每页条数

                        this.tableData = res.data.data;
                        this.tableData.forEach((item)=>{
                            item.is_delete == 0 ? (item.is_delete_text = '正常') : (item.is_delete_text = '禁用')
                        })
                      console.log("this.tableData",this.tableData);
                    }
                }).catch(error =>{
                    this.$message({
                        type:'error',
                        message:error.message || 'Error'
                    });
                })
            },
            search(){
                this.labels(this.queryInfo,this.queryInfo.page,this.queryInfo.pageSize);
            },
        },
        created() {
            this.labels([],this.queryInfo.page,this.queryInfo.pageSize);
            this.getBaseLabels();
        }
    }
</script>
